<script setup lang="ts"></script>
<template>
  <div class="content">
    <h1 class="list_tit">商城</h1>
    <div class="good_type">
      <p>女装</p>
      <p>男装</p>
      <p>手机</p>
      <p>电脑</p>
      <p>运动</p>
    </div>
    <div class="list">
      <div class="list_ul">
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>懒人小沙发</p>
          <span>舒适休闲，完善支撑</span>
          <h3>126.4<span class="isHot">热销</span></h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>减压弹力球</p>
          <span>释放压力，放松身心</span>
          <h3>95.2</h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>简约一字发夹</p>
          <span>简约设计，百搭款式</span>
          <h3>15.9></h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>毛线小兔子耳朵发夹</p>
          <span>可爱萌趣，精致做工</span>
          <h3>12.7</h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>懒人小沙发</p>
          <span>舒适休闲，完善支撑</span>
          <h3>126.4<span class="isHot">热销</span></h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>减压弹力球</p>
          <span>释放压力，放松身心</span>
          <h3>95.2</h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>简约一字发夹</p>

          <span>简约设计，百搭款式</span>
          <h3>15.9></h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>毛线小兔子耳朵发夹</p>
          <span>可爱萌趣，精致做工</span>
          <h3>12.7</h3>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.content {
  padding-bottom: 300px;
}
.good_type {
  display: flex;
  justify-content: start;
  width: 1280px;
  margin: 30px auto 50px;
  border-bottom: 2px solid #ccc;
}
.good_type p {
  width: 100px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.good_type p:hover {
  background: #f2f2f2;
}
.list_tit {
  width: 1280px;
  margin: 30px auto 50px;
  display: flex;
  justify-content: center;
}
.list {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}
.list_ul {
  width: 1280px;
  height: 300px;
  display: flex;

  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.list_li {
  position: relative;
  width: 300px;
  height: 100%;
  box-shadow: 2px 2px 10px #ddd;
  text-align: left;
  margin-bottom: 20px;
  cursor: pointer;
}
.li_img {
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background: #abe1cc;
}
.list_li p {
  font-size: 18px;
  line-height: 30px;
}
.list_li span {
  display: block;
  font-size: 14px;
  color: #888;
}
.list_li h3 {
  font-size: 28px;
  color: #cf4444;
  line-height: 60px;
}
.list_li .isHot {
  position: absolute;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #cf4444;
  border-radius: 10px;
  bottom: 30px;
  right: 10px;
  color: yellow;
  font-family: "宋体";
}
</style>
